<template>
	<div class="study_item">
		<router-link class="image" :to="`/front/trainingResources/${data.courseId}`">
			<el-image :src="imageUrl" fit="cover"></el-image>
		</router-link>
		<div class="intro">
			<h4>{{ courseInfo.title }}</h4>
			<el-row>
				<el-col :xs="24" :sm="12">建设单位：{{ courseInfo.extFiled2 }}</el-col>
				<el-col :xs="24" :sm="12">学时：{{ courseInfo.sumHours }}</el-col>
				<template v-if="!!data.courseProgress">
					<el-col :span="24" v-html="learnProgress"></el-col>
				</template>
			</el-row>
		</div>
		<div class="button">
			<slot></slot>
		</div>
	</div>
</template>

<script>
import lodash from 'lodash';
import { mapGetters } from 'vuex';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	data() {
		return {};
	},
	computed: {
		...mapGetters(['siteInfo']),
		courseInfo() {
			return this.data.sysCourseInfo || {};
		},
		learnProgress() {
			let progress = this.data?.courseProgress;
			let totalNum = `<strong><font color="#f00">${progress.totalNum}</font></strong>`;
			let finishNum = `<strong><font color="#f00">${progress.finishNum}</font></strong>`;
			if (!lodash.isEqual(progress.totalNum, progress.finishNum)) {
				return `课程共有${totalNum}个章节，您已完成了${finishNum}个章节，未完成学习`;
			} else {
				return `课程共有${totalNum}个章节，您已完成了${finishNum}个章节，已完成学习`;
			}
		},
		imageUrl() {
			let httpUrl = this.courseInfo?.sysAttachment?.httpUrl;
			if (!!httpUrl) {
				return httpUrl.replaceIP();
			} else if (this.siteInfo.defaultCourseImg) {
				return this.siteInfo.defaultCourseImg;
			} else {
				return require('@/assets/img/course-cover.jpg');
			}
		}
	},
	watch: {},
	methods: {}
};
</script>

<style lang="scss" scoped>
.study_item::v-deep {
	display: flex;
	border-bottom: solid 1px #ebeef5;
	a.image {
		width: 160px;
		margin: 16px;
		flex-shrink: 0;
		overflow: hidden;
		.el-image {
			position: relative;
			padding-top: 56.25%;
			display: block;
			width: 100%;
			img,
			.el-image__error {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}
	}
	.intro {
		flex: 1;
		padding: 16px 0;
		overflow: hidden;
		h4 {
			font-size: 16px;
			line-height: 1;
		}
		.el-col {
			line-height: 1;
			margin-top: 16px;
			color: #606266;
		}
	}
	.button {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 16px;
		flex-shrink: 0;
		border-left: solid 1px #ebeef5;
		.el-button {
			margin-left: 0;
			margin-top: 10px;
			&:first-child {
				margin-top: 0;
			}
		}
	}
}
@media screen and (max-width: 767px) {
	.study_item::v-deep {
		flex-direction: column;
		a.image {
			width: calc(100% - 32px);
		}
		.intro {
			padding: 0 16px;
		}
		.button {
			border-left: none;
			flex-direction: row;
			.el-button {
				width: 100%;
				margin-top: 0;
				font-size: 16px;
				margin-left: 10px;
				&:first-child {
					margin-left: 0;
				}
			}
		}
	}
}
</style>
